<template>
	<view class="left-tab" :style="{background:bgColor,width:width + 'rpx',}">
		<view class="u-flex u-flex-center u-flex-items-center item" :class="[{'cur':item.value === value}]"
			:style="{height:height + 'rpx'}" v-for="(item,index) in list" :key="index" @click.stop="handleTab(item)">
			{{item.label}}</view>
	</view>
</template>

<script>
	export default {
		name: "yq-left-tab"
	}
</script>

<script setup>
	defineProps({
		value: {
			type: Number,
			default: 1
		},
		list: {
			type: Array,
			default: []
		},

		width: {
			type: Number,
			default: 200
		},
		height: {
			type: Number,
			default: 80
		},
		bgColor: {
			type: String,
			default: '#FFFFFF'
		}
	})

	const emit = defineEmits('on-change')
	const handleTab = (item) => {
		emit('on-change', item.value)
	}
</script>

<style lang="scss" scoped>
	.left-tab {
		height: 100vh;
		overflow-y: scroll;
		font-size: 26rpx;

		.item {
			padding: 0 20rpx;
			text-align: center;
		}

		.cur {
			background: rgba(#1296db, .1);
			color: #1296db;
		}
	}
</style>